<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>triangle</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            border: 3px solid blue;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="triangle" width="800" height="600"></canvas>
    <script type="text/javascript" src="../libs/webgl-utils.js"></script>
    <script type="text/javascript" src="../libs/shader.js"></script>

    <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec4 a_position;
        void main() {
            gl_Position = a_position;
        }
    </script>

    <script id="fragment-shader" type="x-shader/x-fragment">
        precision mediump float;//将精度设置为中等精度
        void main() {
            gl_FragColor = vec4(1, 0, 0.5, 1);
        }
    </script>
    <script>
        "use strict";

        function main() {
            let canvas = document.getElementById('triangle');

            //判断浏览器是否支持webgl， antailias用于设置抗锯齿，
            let gl = canvas.getContext('webgl', {antialias: true, depth: false});
            if (!gl) {
                console.log("您的浏览器不支持webgl！");
            }

            //获取GLSL文本
            let vShaderSource = document.getElementById('vertex-shader').text;
            let fShaderSource = document.getElementById('fragment-shader').text;

            //创建、编译和链接着色器
            let program = initShader(gl, vShaderSource, fShaderSource);

            //在着色器中寻找attribute变量
            let positionAttributeLocation = gl.getAttribLocation(program, 'a_position');

            //创建缓冲区
            let positionBuffer = gl.createBuffer();

            //将它绑定到ARRAY_BUFFER（将其视为ARRAY_BUFFER = positionBuffer）
            //绑定缓冲区
            gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

            //三个顶点构成一个三角形
            let positions = [
                -0.25, 0,
                   0, 0.5,
                 0.25, 0
            ];

            //通过绑定点向缓冲区绑定数据
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

            //渲染

            //使画布的像素数和显示大小匹配
            webglUtils.resizeCanvasToDisplaySize(gl.canvas);

            //设置视口
            gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

            //清除canvas
            gl.clearColor(0, 0, 0, 1);
            gl.clear(gl.COLOR_BUFFER_BIT);

            //应用着色器
            gl.useProgram(program);

            //建立着色器中attribute变量与缓冲区之间的连接
            gl.enableVertexAttribArray(positionAttributeLocation);

            const size = 2;//2维坐标：每次迭代运行提取两个单位数据
            const type = gl.FLOAT;//每个单位的数据类型是32位浮点型
            const normalize = false;//不需要归一化数据
            const stride = 0;//每次迭代前进大小* sizeof（类型）以获得下一个位置
            const offset1 = 0;//从缓冲起始位置开始读取

            //从缓冲区取出数据
            gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset1);

            let primitiveType = gl.TRIANGLES;
            let offset2 = 0;
            let count = 3;
            gl.drawArrays(primitiveType, offset2, count);//画图
        }

        main();

    </script>

</body>
</html>